<template>
  <div class="full-screenn">
    <div class="artistic1">
      <span>Your location:</span><br />
      <span class="art">Enrol and Add View</span>
    </div>
    <!-- 提交时把整个表单提交 -->
    <form @submit.prevent="saveBall()" class="foem1">
      <div class="boox">
        <label for="ballname" class="form-label">球桌名：</label>
        <input
          type="text"
          class="form-controlq"
          id="ballname"
          placeholder="请添加球桌名："
          v-model="addBall.ballname"
        />
      </div>
      <div class="boox">
        <label for="buytime" class="form-label">置购时间：</label>
        <input
          type="text"
          class="form-controlq"
          id="buytime"
          placeholder="置购时间是："
          v-model="addBall.buytime"
        />
      </div>
      <div class="boox">
        <label for="state" class="form-label">状态：</label>
        <input
          type="text"
          class="form-controlq"
          id="state"
          placeholder="请添加状态"
          v-model="addBall.state"
        />
      </div>
      <div class="boox">
        <label for="phone" class="form-label">是否损坏：</label>
        <input
          type="text"
          class="form-controlq"
          id="broken"
          placeholder="是否损坏"
          v-model="addBall.broken"
        />
      </div>
      <div class="boox">
        <label for="image" class="form-label">图片：</label>
        <input
          type="text"
          class="form-controlq"
          id="image"
          placeholder="请添加图片"
          v-model="addBall.image"
        />
      </div>
      <button type="submit" class="btn btn-warning">提交</button>
    </form>
  </div>
</template>

<script>
import { http } from "../../utils/http.js";
export default {
  data() {
    return {
      addBall: {},
    };
  },
  methods: {
    //页面传的数据到后端写到数据库
    saveBall() {
      http.post("/addBall", this.addBall).then((res) => {
        console.log(this.addBall);
        if (res.status === 200) {
          alert("增加成功");
        } else {
          ("增加失败");
        }
        //打印到控制台
        console.log(res);
        //回到路由
        // this.$router.push("/user");
        this.$router.go(-1);
      });
    },
  },
};
</script>

<style scoped>
/* 背景图片 */
.full-screenn {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-image: url("../../assets/21.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1; /* 确保内容在上面 */
  /* 可能需要额外的样式来确保内容可以显示在上面 */
}

/* 表单样式 */
.foem1 {
  /* 设置表单的尺寸、边框和位置 */
  width: 800px;

  border: 3px solid red;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 使表单居中 */
  box-sizing: border-box; /* 确保边框和内边距不会增加元素的总宽度和总高度 */
  padding: 20px; /* 添加一些内边距以避免内容直接贴在边框上 */
}

.boox {
  /* 设置输入框容器的样式，如需要可以添加更多样式 */
  height: 50px;
  margin-bottom: 15px; /* 输入框之间的间隔 */
}

label {
  /* 设置标签的样式，如需要可以添加更多样式 */
  display: block; /* 使标签独占一行 */
  margin-bottom: 3px; /* 标签与输入框之间的间隔 */
}

.btn {
  /* 如果需要，可以设置提交按钮的样式 */
  margin-top: 5px;
}

/* 顶部英文 */
.artistic1 {
  position: fixed; /* 固定在视口上 */
  top: 0; /* 距离顶部0px */
  left: 0; /* 距离左侧0px */
  color: rgb(225, 16, 16); /* 设置文字颜色为白色 */
  font-style: italic; /* 设置文字为斜体 */
  font-size: 30px; /* 设置字号为28px */

  letter-spacing: 2px; /* 设置字间距为2px */
  padding-top: 20px;
  padding-left: 50px;
}
.art {
  padding-left: 300px;
}
</style>